<!-- 模板 -->
<template>
  <div class="root">
    <header>
      <i class="back iconfont left-icon" @click="back()"></i>
      <div class="tit">评价</div>
      <div class="submit" @click="getUser()">提交</div>
    </header>
    <main>
      <div class="border">
        <div>评分</div>
        <van-rate v-model="value" count="5" color="#FC1E1E" size="0.6rem" />
      </div>
      <div class="tag">
        <div>你觉得该节课</div>
        <div class="tagBtn">
          <div
            :class="index === activeIndex ? 'active item' : 'item'"
            v-for="(item, index) in tag"
            :key="item"
            @click="activeIn(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="text">
        <textarea maxlength="200" style="resize: none" rows="5" v-model="tvalue"></textarea>
        <div class="jishu">{{ tvalue.length }}/200</div>
      </div>
    </main>
    <van-dialog />
  </div>
</template>
<script>
import request from '../utils/request.js'
import { Dialog } from 'vant'
import Vue from 'vue'
Vue.use(Dialog)
export default {
  name: '',
  data() {
    return {
      activeIndex: 0,
      value: 0,
      tvalue: '',
      tag: ['太简单', '简单', '适中', '有点难', '太难了'],
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //返回上页
    back() {
      this.$router.go(-1)
    },
    activeIn(index) {
      this.activeIndex = index
    },
    //格式化时间,用于将事件传递到数据库中
    formatTime(v) {
      let date = new Date(v)
      let num = Number(date)
      let flag = Number.isNaN(num)
      if (flag === true) {
        date = new Date()
      }
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let M = date.getMinutes()
      M = M < 10 ? '0' + M : M
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return `${y}-${m}-${d} ${h}:${M}:${s}`
    },
    //调取评论接口
    async getUser() {
      let now = this.formatTime(new Date())
      let user = JSON.parse(sessionStorage.getItem('login'))
      if (!user) {
        Dialog.confirm({
          title: '提示',
          message: '请先登录',
        })
          .then(() => {
            return this.$router.push('/')
          })
          .catch(() => {
            return
          })
        return
      }
      user = user.data[0]

      if (this.tvalue.length === 0) {
        Dialog.alert({
          title: '提示',
          message: '评论不能为空',
        }).then(() => {
          return
        })
      }
      let options = {
        url: '/pl',
        type: 'post',
        data: {
          title: user.username,
          h3: this.tvalue,
          src: user.src,
          stars: this.value,
          did: 2,
          time: now,
        },
      }
      try {
        let { data: res } = await request(options)
        if (res.meta.status !== 200) {
          return console.log(res.meta.msg)
        }
        Dialog.alert({
          title: '提示',
          message: '评论成功',
        }).then(() => {
          this.$router.push('/evaluate')
        })
      } catch (err) {
        console.log(err)
      }
    },
  },
  created() {},
  mounted() {},
}
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.root {
  padding: 0.2rem;
  font-size: 0.28rem;
  header {
    color: #666;
    display: flex;

    justify-content: space-between;
    .back {
      font-size: 0.32rem;
      font-size: 500;
    }
    .tit {
      font-size: 0.32rem;
      color: #333;
      font-weight: 700;
    }
    .submit {
      color: #fc1e1e;
    }
  }
  main {
    margin-top: 0.4rem;
    border-radius: 0.1rem;

    padding: 0.2rem;
    .border {
      padding: 0.2rem;
      border: 1px solid #f4f4f4;
      .van-rate {
        margin: 0.2rem 0;
        width: 100%;
        justify-content: space-around;
      }
    }
    .tag {
      margin-top: 0.2rem;
      .tagBtn {
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-around;
        .item {
          background-color: #f6fafc;
          border-radius: 0.4rem;
          font-size: 0.24rem;
          padding: 0.05rem 0.2rem;
          color: #333;
        }
        .active {
          background-color: #fc1e1e;
          color: #fff;
        }
      }
    }
    .text {
      border: 1px solid #ebebeb;
      margin-top: 0.2rem;
      border-radius: 0.2rem;
      textarea {
        width: 100%;
        padding: 0.2rem;
        border: 0;
        line-height: 1.5;
        letter-spacing: 0.05rem;
      }
      .jishu {
        text-align: right;
        padding: 0.2rem;
      }
    }
  }
}
</style>
